<template>
	<view>
		<Header title="充值记录" :showBack="true"></Header>
		<view class="container">
			<view class="all">共充值：{{allNum.toFixed(2)||'0'}}元</view>
			<view class="list">
				<view>
					<view>充值金额(元)</view>
					<view>充值时间</view>
				</view>
				<view v-for="(item,index) in list" :key="index">
					<view>{{item.rechargeAmount}}</view>
					<view>{{item.creationTime}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allNum:0,
				curPage:1,
				list:[
					
				],
				isQingqiu:true
			}
		},
		onLoad(){
			this.getInfo()
		},
		onReachBottom(){
			if(this.isQingqiu){
				this.isQingqiu=false
				this.getInfo()
			}
		},
		methods: {
			getInfo(){
				this.$http('/minprogram/api/member/getOwnerMemberCardRechargeList',{
						    "condition":{
						        "memberCardId": uni.getStorageSync('info').id
						    },
						    "pageNum": this.curPage,
						    "pageSize": 30

						},res=>{
							if(res.data.items.length>0){
								res.data.items.forEach((item)=>{
									this.allNum=this.allNum+item.rechargeAmount
								})
								this.list.push(...res.data.items)
								if(res.data.items.length==30){
									this.curPage++
									this.isQingqiu=true
								}
							}
				})
			}
		}
	}
</script>

<style scoped lang="less">
.all{
	height: 90upx;
	line-height: 90upx;
	background-color: #FFFFFF;
	text-align: right;
	font-size: 28upx;
	box-sizing: border-box;
	padding:0 20upx;
	border-radius: 10upx;
	// box-shadow: 0 0 15upx rgba(73, 185, 173, .2);
	box-shadow: 0 3upx 20upx 1upx rgba(73, 185, 173, .2);
}
.list{
	// box-shadow: 0 0 15upx rgba(73, 185, 173, .2);
	box-shadow: 0 3upx 20upx 1upx rgba(73, 185, 173, .2);
	margin-top: 20upx;
	background-color: #FFFFFF;
	border-radius: 10upx;
	padding: 40upx;
	box-sizing: border-box;
	>view{
		display: flex;
		width: 100%;
		font-size: 28upx;
		margin-bottom: 30upx;
		>view:first-child{
			width: 40%;
		}
		>view:last-child{
			width: 60%;
		}
	}
}
</style>
